<script setup lang='ts' name="role-authority-role-checkbox">
import { ElCheckbox, ElCheckboxGroup, ElCollapse, ElCollapseItem } from 'element-plus'
import { ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    resultList?: any
}>(), {
    resultList: [],
})

const { resultList } = toRefs(props)
const getResultList = ref<any>([])
const getCheckedCities = ref<any>([])

function handleCheckAllChange(val: any, item: any) {
    if (val) {
        item.children.forEach((items: any) => {
            getCheckedCities.value.push(items.code)
        })
        itemIndeterminate(item)
        item.checkAll = true
    }
    else {
        itemIndeterminate(item)
        item.checkAll = false
        item.children.forEach((items: any) => {
            getCheckedCities.value.forEach((itemss: any, index: any, arr: any) => {
                console.log(itemss)
                if (items.code === arr[index])
                    getCheckedCities.value.splice(index, 1)
            })
        })
    }
}
function handleCheckedCitiesChange(value: any, data: any) {
    getCheckedCities.value = value
    itemIndeterminate(data)
}
function init() {
    getResultList.value = resultList.value
    getResultList.value.forEach((v: any) => {
        v.checkAll = false
    })
}
init()

function getAlreadyHaveAuth(data: any) {
    getCheckedCities.value = data
}

const activeNames = ref<any>([0, 1, 2, 3])

const handleGroupName = computed(() => (data: any) => {
    // console.log(data, 'datadatadatasdsa')
    const dataLeg = data.children.length

    let tempResultListOne: any = []

    tempResultListOne = Object.values(data.children.slice(0, Math.floor(dataLeg / 2)).reduce((acc: any, cur: any) => {
        const { group_name, ...rest } = cur
        if (acc[group_name])
            acc[group_name].children.push(rest)
        else
            acc[group_name] = { children: [rest], group_name }

        return acc
    }, {}))

    // console.log(tempResultListOne, 'tempResultListOne')
    tempResultListOne.forEach((item: any) => {
        item.checkAll = false
    })
    return tempResultListOne
})
const handleGroupName2 = computed(() => (data: any) => {
    // console.log(data, 'datadatadatasdsa')
    const dataLeg = data.children.length
    let tempResultListTwo: any = []

    tempResultListTwo = Object.values(data.children.slice(Math.floor(dataLeg / 2), dataLeg).reduce((acc: any, cur: any) => {
        const { group_name, ...rest } = cur
        if (acc[group_name])
            acc[group_name].children.push(rest)
        else
            acc[group_name] = { children: [rest], group_name }

        return acc
    }, {}))
    // console.log(tempResultListTwo, 'tempResultListTwo')
    tempResultListTwo.forEach((item: any) => {
        item.checkAll = false
    })
    return tempResultListTwo
})

// 是否全选
function itemIndeterminate(item: any) {
    return JSON.stringify(item) === '{}'
        ? false
        : item.children.every((v: any) => getCheckedCities.value.includes(v.code))
}

function itemIndeterminateRight(item: any) {
    if (JSON.stringify(item) === '{}') {
        return false
    }
    else {
        return (
            item.children.some((v: any) => getCheckedCities.value.includes(v.code))
            && !item.children.every((v: any) => getCheckedCities.value.includes(v.code))
        )
    }
}

function handleCheckAllChangeProOne(val: any, item: any) {
    itemIndeterminateRight(item)
    item.checkAll = val
    item.children.forEach((items: any) => {
        if (val) {
            getCheckedCities.value.push(items.code)
        }
        else {
            getCheckedCities.value.forEach((itemss: any, index: any, arr: any) => {
                console.log(itemss)
                if (items.code === arr[index])
                    getCheckedCities.value.splice(index, 1)
            })
        }
    })
}
function handleCheckAll(data) {
    getCheckedCities.value = []
    if (data) {
        resultList.value.forEach((item) => {
            const codes = item.children.map((v: any) => v.code)
            getCheckedCities.value.push(...codes)
        })
    }
}
defineExpose({
    getAlreadyHaveAuth,
    getCheckedCities,
    handleCheckAll,
})
</script>

<template>
    <ElCollapse v-model="activeNames">
        <div v-for="(item, index) in getResultList"
             :key="item.module_name"
        >
            <ElCollapseItem :title="item.module_name"
                            :name="index"
            >
                <div flex
                     justify-between
                     style="align-items: center;"
                >
                    <div>
                        <div v-for="items in handleGroupName(item)"
                             :key="items.group_name"
                             mb-10
                             flex
                        >
                            <ElCheckbox :value="items.checkAll ? true : false"
                                        :indeterminate="itemIndeterminate(items)"
                                        @change="handleCheckAllChange($event, items)"
                            >
                                <div style="background-color: #f7f8fa;padding: 10px;"
                                     w-130
                                >
                                    {{ items.group_name }}
                                </div>
                            </ElCheckbox>

                            <ElCheckboxGroup v-model="getCheckedCities"
                                             ml-60
                                             @change="handleCheckedCitiesChange($event, item)"
                            >
                                <ElCheckbox v-for="city in items.children"
                                            :key="city.code"
                                            :label="city.display_name"
                                            :value="city.code"
                                >
                                    {{ city.display_name }}
                                </ElCheckbox>
                            </ElCheckboxGroup>
                        </div>

                        <div v-for="items in handleGroupName2(item)"
                             :key="items.group_name"
                             mb-10
                             flex
                        >
                            <ElCheckbox v-model="items.checkAll"
                                        :indeterminate="itemIndeterminate(items)"
                                        @change="handleCheckAllChange($event, items)"
                            >
                                <div style="background-color: #f7f8fa;padding: 10px;"
                                     w-130
                                >
                                    {{ items.group_name }}
                                </div>
                            </ElCheckbox>

                            <ElCheckboxGroup v-model="getCheckedCities"
                                             ml-60
                                             @change="handleCheckedCitiesChange($event, item)"
                            >
                                <ElCheckbox v-for="city in items.children"
                                            :key="city.code"
                                            :label="city.display_name"
                                            :value="city.code"
                                >
                                    {{ city.display_name }}
                                </ElCheckbox>
                            </ElCheckboxGroup>
                        </div>
                    </div>

                    <ElCheckbox v-model="item.checkAll"
                                label="全选"
                                size="large"
                                :indeterminate="itemIndeterminateRight(item)"
                                @change="handleCheckAllChangeProOne($event, item)"
                    />
                </div>
            </ElCollapseItem>
        </div>
    </ElCollapse>
</template>
